<template>
  <div class="same-recommend">
    <div class="title">相似推荐</div>
    <div class="slide-box">
      <div class="pic-box">
        <swiper ref="hits" class="swiper" :options="swiperOption">
          <swiper-slide class="pic-item" v-for="(item, index) in list" :key="index" @click="seeProduct(item.product_id)">
            <div class="item">
              <div class="pic-box"><img :src="item.image" class="object transition" /></div>
              <h3 class="item-title overflow">{{ item.store_name || '暂无' }}</h3>
              <div class="price clearfix">
                <div class="left">
                  <span>￥{{ item.ot_price }}/Pc</span>
                  <span class="gray">起</span>
                </div>
                <div class="right"><img src="../assets/images/heart.png" @click.stop="collect(item.product_id)" alt="" /></div>
              </div>
              <div class="cart clearfix">
                <div class="left">
                  <span>{{ item.moq }} Pcs</span>
                  <span class="gray">起订量</span>
                </div>
                <div class="right"><img src="../assets/images/cart-icon.png" @click.stop="cart(item.product_id, item.moq)" alt="" /></div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import { addCart, collectPro } from '@/request/api';

export default {
  name: 'Recommend',
  components: {
    swiper,
    swiperSlide
  },
  props: {
    list: Array
  },
  data() {
    return {
      contents: [],
      swiperOption: {
        slidesPerView: 5,
        direction: 'horizontal',
        spaceBetween: 10,
        navigation: {
          nextEl: '.next',
          prevEl: '.prev'
        }
      }
    };
  },
  methods: {
    seeProduct(id) {
      this.$emit('changeProduct', id);
    },
    // 收藏产品
    collect(id) {
      let that = this;
      // 判断用户是否登录
      if (!this.$store.state.access_token) {
        this.$router.push({ name: 'Login' });
      } else {
        let data = {
          type_id: id,
          type: 1
        };
        collectPro(data)
          .then(res => {
            if (res.status === 200) {
              that.$toastVant(res.message);
            }
          })
          .catch(err => {
            that.$message.error(err.message);
          });
      }
    },
    // 加入购物车
    cart(id, moq) {
      if (!this.$store.state.access_token) {
        this.$router.push({ name: 'Login' });
      } else {
        let data = {
          cart_num: moq,
          is_new: 0,
          product_id: id,
          product_type: 0
        };
        addCart(data)
          .then(res => {
            if (res.status === 200) {
              this.$toastVant('加入成功！');
            }
          })
          .catch(err => {
            this.$message.error(err.message);
          });
      }
    }
  }
};
</script>

<style scoped>
.title {
  position: relative;
  padding-left: 16px;
  color: #4d4d4d;
  font-size: 20px;
}

.title::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  width: 5px;
  height: 20px;
  background: #797979;
  border-radius: 3px;
}

.slide-box {
  width: 100%;
  position: relative;
}

.slide-box .pic-box .swiper {
  margin: 30px 0 0;
}

.slide-box .pic-box .swiper .pic-item {
  width: 100%;
  /* margin-left:8px; */
  /* margin-right: 0 !important; */
}

.slide-box .prev,
.slide-box .next {
  width: 47px;
  height: 47px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #e48b2c;
  z-index: 70;
  outline: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-box .prev {
  left: -15px;
}

.slide-box .next {
  right: -15px;
}

.item {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  margin: 0 9px 9px 0;
  padding: 13px 9px 20px 9px;
  background: #fff;
  cursor: pointer;
}

.item .pic-box {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.item .item-title {
  margin: 17px 0;
  color: #4d4d4d;
  height: 46px;
  font-size: 16px;
}

.item:hover .object {
  transform: scale(1.1);
}

.item:hover .item-title {
  color: #e38b2e;
}

.item .price {
  font-size: 18px;
  font-weight: bold;
  color: #e38b2e;
}

.item .cart {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #e38b2e;
}

.gray {
  color: #969696;
  margin-left: 5px;
  font-weight: normal;
  font-size: 16px;
}
</style>
